<template>
  <div id="login">
    <div id="title">
      <h1>数 字 鸽 业 精 准 管 控 云 服 务 平 台</h1>
    </div>
    <div class="box" :style="boxHeight">
      <el-tabs v-model="activeName" @tab-click="handleTabClick" :stretch="true">
        <!-- 表单区域 -->
        <el-tab-pane label="密码登录" name="passwordLogin">
          <Form
            :callback="handleSubmit"
            :options="['phone', 'password', 'captcha']"
            ref="passwordLogin"
          ></Form>
        </el-tab-pane>
        <el-tab-pane label="短信登录" name="messageLogin">
          <Form :callback="handleSubmit"></Form>
        </el-tab-pane>
      </el-tabs>
      <div style="display: flex; justify-content: flex-end">
        <router-link to="/forgetPassword" style="font-size: 14px"
          >忘记密码</router-link
        >
        <el-divider direction="vertical"></el-divider>
        <router-link to="/register" style="font-size: 14px">注册</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import Form from "../../components/Login/Form"
import { mapState, mapActions } from "vuex";
import {
  PasswordLogin,
  SmsLogin,
  gethead
}from "../../Api/login/index"
export default {
  components: {
    Form,
  },
  props: {},
  data() {
    return {
      // 默认登录方式
      activeName: "passwordLogin",
      // 切换登录方式设置背景高度
      boxHeight: "height:440px",

      token: undefined,
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    ...mapState("roleInfo", ["userPermissions"]),
  },
  methods: {
    ...mapActions("roleInfo", ["getUserPermissions"]),
    // 切换登录方式
    handleTabClick(tab) {
      console.log("tab: ", tab);
      this.activeName = tab.name;
      if (tab.name === "passwordLogin") {
        this.boxHeight = "height:440px";
      } else {
        this.boxHeight = "height:390px";
      }
    },
    // handleSubmit(form){
    //   console.log(form);
    //   this.$router.push("/ProductionManage/BreedingBase");
    // },
    // 向登录接口发起请求
    async handleSubmit(form) {
      // console.log("form: ", form);
      let { code, phone, captcha, password } = form;
      if (this.activeName === "passwordLogin") {
        var { data: res, headers } = await PasswordLogin({
          captcha,
          phone,
          password,
        });
        console.log("res", res, "hesders", headers);
      } else {
        var { data: res, headers } = await SmsLogin({ phone, code });
        console.log("res", res, "hesders", headers);
      }
      if (res.statusCode === 20000) {
        localStorage.setItem("token", headers.token);
        // 获取登录用户权限信息
        this.getUserPermissions(this);
        sessionStorage.setItem("userPermissions", JSON.stringify(res.data));
        this.$store.commit("setUserInfo", res.data);
        this.$message.success(res.message);
        this.$router.push("/BasicInfomation/BreedingBase");
      }else{
        // this.$refs.passwordLogin.getCaptcha();
        this.$message.error(res.message);
        console.error(res.message);
        if(res.message=="验证码输入错误"){
            this.sendCode()
        }
      }
    },
  },
  mounted() {
    if (this.activeName === "passwordLogin") {
      this.$refs.passwordLogin.getCaptcha();
    }
    // 清除主题
    document.body.className = "";
  },
};
</script>
<style lang="scss" scoped>
#login {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url("../../assets/image/newbg.jpg");
  background-size: cover;
}

#title {
      width: 100%;
      height: auto;
      overflow: hidden;
      text-align: center;
      padding: 50px 0;
      // position: absolute;
      // top: 15%;
      // left: 50%;
      // transform: translate(-50%, -50%);
      h1 {
        margin: 0 0 30px;
        color: rgb(245, 243, 243);
        text-align: center;
        font-size: 40px;
        display: inline;
        white-space:nowrap
      }
}
/deep/.box {
  margin: 0 auto;
  // position: absolute;
  // top: 55%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  width: 380px;
  // height: 25%;
  padding: 30px;
  background: rgba(255, 255, 255, 0.945);
  // background: rgba(0, 0, 0, 0.589);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(131, 127, 127, 0.5);
  border-radius: 10px; /*登录窗口边角圆滑*/

  .el-tabs__item {
    // background-color: transparent;
    color: rgba(0, 0, 0, 0.589);
    height: 40px;
    font-size: 16px;
  }
  .is-active {
    color: rgb(7, 7, 7) !important;
  }

  .el-input__inner {
    background-color: transparent;
    color: rgb(5, 5, 5);
    font-size: 10px;
  }
  .el-form {
    margin: 10px 0px;
    .el-form-item {
      .login {
        margin-top: 15px;
        margin-left: -40px;
        width: 105%;
        height: 40px;
        font-size: 18px;
      }
      // .el-input {
      //   .el-input__inner {
      //     // border: none;
      //     // border-bottom: 1px solid rgb(104, 96, 96);
      //     // border-radius: unset;
      //     // font-size: 15px;
      //   }
      // }
      .captcha {
        width: 50%;
        float: left;
        .el-input__inner {
          border: 1px solid rgb(131, 175, 216);
          border-radius: 5px !important;
          background-color: rgb(251, 251, 251);
          color: rgb(22, 21, 21);
        }
      }
      img {
        width: 45%;
        position: relative;
        display: block;
        left: -1%;
        float: right;
        height: 40px;
      }
    }
  }
}

/deep/.el-tabs__item {
  color: #fff;
}
</style>